<template>
  <a-card :id="id" v-bind="attrs" class="dragItem" style="float: left; width: 100%">
    <div :style="{ height: extendAttrs.height }">
      <s-scroll>
        <dynamic-drag-form
          ref="dragContext"
          :item-choose="itemChoose"
          :drag-group-name="dragGroupName"
          :drag-class="dragClass"
          :check-class="checkClass"
          :form="form"
          :items="fakeItems"
          :select-id="selectId"
          :logic-control="logicControl"
          @select="
            (v) => {
              $emit('itemSelect', v)
            }
          "
          @remove="
            (v) => {
              $emit('itemRemove', v)
            }
          "
        />
      </s-scroll>
    </div>
  </a-card>
</template>
<script>
import BaseDragItem from './BaseDragItem'
import { defineAsyncComponent } from 'vue'
export default {
  name: 'CardItem',
  components: {
    DynamicDragForm: defineAsyncComponent(() =>
      import('@/components/extends/dynamicForm/designer/dragForm/index.vue')
    )
  },
  extends: BaseDragItem,
  emits: ['itemSelect', 'itemRemove'],
  data() {
    return {
      fakeItems: this.children
    }
  },
  methods: {
    buildHtml(disabled, space, filter, modelName) {
      let html = space + '<a-card\r\n'
      html = html + this.buildHtmlAttr(disabled, this.attrs, space + '  ')
      html = html + space + '  style="float: left;width: 100%"\r\n'
      html = html + space + '>\r\n'
      html = html + space + '   <s-scroll style="height:' + this.extendAttrs.height + '">\r\n'
      html = html + space + '     <a-row>\r\n'
      html =
        html + this.$refs.dragContext.buildHtml(disabled, space + '          ', filter, modelName)
      html = html + space + '     </a-row>\r\n'
      html = html + space + '   </s-scroll>\r\n'
      html = html + space + '</a-card>'
      return html
    },
    findKeyedItems(array) {
      this.$refs.dragContext.findKeyedItems(array)
    },
    findItemById(id) {
      return this.$refs.dragContext.findItemById(id)
    },
    findItemByKey(key) {
      return this.$refs.dragContext.findItemByKey(key)
    },
    removeItemById(id) {
      return this.$refs.dragContext.removeItemById(id)
    },
    getData(array, filter) {
      array.push({
        id: this.id,
        type: this.type,
        attrs: this.attrs,
        extendAttrs: this.extendAttrs,
        properties: this.properties,
        children: this.$refs.dragContext.getData(null, filter)
      })
    },
    findQueryableItemHtml(obj, space) {
      this.$refs.dragContext.findQueryableItemHtml(obj, space)
      return obj
    }
  }
}
</script>
